//logs.js
const ballFallAnimation = require("../../utils/ballFallAnimation.js");

var app = getApp();
Page({
    data: {
        commodityList: [],
        ballAnimationArray: [0], //小球动画
        keyFrames: [], //动画帧
        bus_y: -20, //手指点击的位置
        finishShopCarAnimation: true, //购物车动画是否结束
    },

    onLoad: function () {

        // 设置购物车位置
        this.busPos = {};
        this.busPos["x"] = 45; //购物车的位置
        this.busPos["y"] = wx.getSystemInfoSync().windowHeight - 56;
    },

    onReady: function () {
        this.ballComponent = [];
        // Do something when page ready.
        // 循环获取所有的小球节点
        for (let i = 0; i < this.data.ballAnimationArray.length; i++) {
            // 获取小球节点信息
            this.ballAnimation = this.selectComponent(`#ball-${i}`);
            // 将小球信息存储
            this.ballComponent.push(this.ballAnimation);
        }
    },

    tapAdd(e) {
        // 简单判断手指点击位置是否是上次点击的位置，若是，直接是用上一次计算的关键帧数组
        // console.log('输出当前点击为位置', this.data.bus_y, e.touches["0"].clientY)
        if (Math.abs(this.data.bus_y - e.touches["0"].clientY) > 20) {
            this.data.keyFrames = [];
            this.data.bus_y = e.touches["0"].clientY;
            let points = ballFallAnimation.touchOnGoods(
                {
                    x: e.touches["0"].clientX - 10,
                    y: e.touches["0"].clientY - 50,
                },
                this.busPos,
                80
            );
            var index = 0,
                bezier_points = points["bezier_points"];

            var len = bezier_points.length;
            index = len;

            // 放入关键帧
            for (let i = index - 1; i > -1; i--) {
                this.data.keyFrames.push({
                    left: bezier_points[i]["x"] + "px",
                    top: bezier_points[i]["y"] + "px",
                    opacity: i === 0 ? 0 : 1,
                    offset: 0.4,
                });
            }
        }
        this.startAnimation();
    },

    startAnimation: function () {
        // 数组循环，每次开启动画弹出一个数组里面，完成动画之后重新排队
        let id = this.data.ballAnimationArray.pop();

        this.ballComponent[id].startAnimation(this.data.keyFrames);
    },

    // 小球组件动画结束
    endAnimation(e) {
        this.data.ballAnimationArray.unshift(e.detail);

        // 开启购物车动画
        this.startShopCartAnimation();

        // 处理事件逻辑
        // Tip: 后续事件逻辑最好少使用setData,不然在低端机上表现起来会很不流畅
    },

    // 创建购物车动画
    startShopCartAnimation() {
        // 动画没结束，不执行
        if (!this.data.finishShopCarAnimation) {
            return;
        }
        this.data.finishShopCarAnimation = false;
        this.animate(
            "#shopCart",
            [
                {
                    scale: [0.8, 0.8],
                },
                {
                    scale: [1.1, 1.1],
                },
                {
                    scale: [0.9, 0.9],
                },
                {
                    scale: [1, 1],
                },
            ],
            400,
            function () {
                this.data.finishShopCarAnimation = true;
            }.bind(this)
        );
    },
});
